<!DOCTYPE html PUBLIC "-//W3C//h2D XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/h2D/xhtml1-transitional.h2d">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JavaScript简易日历</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
window.onload=function(){
	//获取所需的元素
	var aLis=document.getElementsByTagName("li");
	//获取下方显示区域
	var oDiv=document.getElementsByTagName("div")[1];
	var aPlays=[
		"计划各计划各","看计划看计划","哦箭扣客六年级","脚后跟",
		"他人的规范性","看计划交话费","饿死发的是","跑了",
		"漂亮","评论","作死","退赛"
	];
	//为每一个li添加mouseover事件
	for(var i=0;i<aLis.length;i++){
		//添加自定义属性index 
			aLis[i].index=i;
			aLis[i].onmouseover=function(){
				//设置所有元素为初始颜色
				for(var j=0;j<aLis.length;j++){
					aLis[j].className="";
				}
				//设置当前元素的class为active	
				this.className="active";
				//设置下方div显示当前月的编号
				oDiv.innerHTML="<h2>"+(this.index+1)+"月活动</h2>";	//显示几月活动，this.index表示几月
				//根据当前索引获取数组中对应的文字内容
				oDiv.innerHTML+="<p>"+aPlays[this.index]+"</p>";
			}
	}
	//切换背景色  
}

</script>
</head>

<body>

<div id="tab" class="calendar">

    <ul>
        <li class="active"><h2>1</h2><p>JAN</p></li>
        <li><h2>2</h2><p>FER</p></li>
        <li><h2>3</h2><p>MAR</p></li>
        <li><h2>4</h2><p>APR</p></li>
        <li><h2>5</h2><p>MAY</p></li>
        <li><h2>6</h2><p>JUN</p></li>
        <li><h2>7</h2><p>JUL</p></li>
        <li><h2>8</h2><p>AUG</p></li>
        <li><h2>9</h2><p>SEP</p></li>
        <li><h2>10</h2><p>OCT</p></li>
        <li><h2>11</h2><p>NOV</p></li>
        <li><h2>12</h2><p>DEC</p></li>
    </ul>
    
    <div class="text">
        <h2>1月活动</h2>
        <p>快过年了，大家可以商量着去哪玩吧～</p>
    </div>

</div>

</body>
</html>
